<template>
  <div class="ucenter-content">
    <div class="title">{{ name }}</div>
    <ChartCard :title="'网络概况'">
      <template #chart>
        <div class="chart c3">
          <EquipNumCard></EquipNumCard>
          <div class="c3-2">
            <div class="c3-2-m1">
              <MiniChartCard :title="'设备列表'">
                <template #chart>
                  <EquipTable></EquipTable>
                </template>
              </MiniChartCard>
            </div>
          </div>
        </div>
      </template>
    </ChartCard>
  </div>
</template>

<script setup lang="ts" name="System">
import { onMounted } from "vue";
import ChartCard from "../component/chartCard.vue";
import MiniChartCard from "../component/minChartCard.vue";
import EquipTable from "../component/equipTable.vue";
// import LineEcharts2 from "../component/lineEcharts2.vue";
import EquipNumCard from "./equipNumCard.vue";
import { getNetEquipLatestApi, getNetEquipRangeApi } from "@/api/modules/netManagement/ucenter";

export interface Props {
  name: string;
}
withDefaults(defineProps<Props>(), {
  name: ""
});

const getAlarmTrendData = async () => {
  return;
  const params = {
    devIds: "1114690042203286,1114690042203285,1114690042203283,1114690042203284",
    taskIds: "2,4,6,8",
    timeType: 3
  };
  await getNetEquipLatestApi(params)
    .then(res => {
      console.log(res);
    })
    .catch(error => {
      console.log(error);
    });
};

const getAlarmTrendData1 = async () => {
  return;
  const params = {
    // devIds: "1114690042203286,1114690042203285,1114690042203283,1114690042203284",
    devIds: "1114690042203286",
    taskIds: "2,4,6,8",
    timeType: 2
  };
  await getNetEquipRangeApi(params)
    .then(res => {
      console.log(res);
    })
    .catch(error => {
      console.log(error);
    });
};

const getAllChartData = () => {
  getAlarmTrendData();
  getAlarmTrendData1();
};

onMounted(() => {
  getAllChartData();
});
</script>

<style scoped lang="scss">
@import "../common.scss";
.ucenter-content {
  .c3 {
    flex-direction: column;
    .c3-1 {
      display: flex;
      flex-wrap: wrap;
      gap: 16px 16px;
    }
    .c3-2 {
      // flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      .c3-2-m1 {
        flex: 1.4;
        min-width: 550px;
        height: 320px;
      }
      .c3-2-m2 {
        flex: 1;
        min-width: 400px;
        height: 320px;
      }
      .c3-2-m3 {
        flex: 1;
        min-width: 400px;
        height: 320px;
      }
    }
  }
}
</style>
